<template>
  <!-- 每笔订单的信息 -->
  <el-card style="margin-bottom: 10px;">
    <div slot="header" class="clearfix">
      <span>
        {{ od.createTime }}
        <span style="padding-left: 30px;">
          订单号:
          <span style="font-weight: 600;padding-left: 5px;">{{
            od.orderId
          }}</span>
        </span>
      </span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="deleteOrder(od.userId)"
        >删除订单</el-button
      >
    </div>
    <div>
      <el-table
        :show-header="false"
        :data="od.orderItem"
        border
        style="width: 100%"
      >
        <el-table-column>
          <template slot-scope="scope">
            <div class="item">
              <el-image class="item-pic" :src="scope.row.productImg"></el-image>
              <p class="item-title">
                {{ scope.row.productName + " " + scope.row.skuName }}
              </p>
              <p class="item-num">x{{ scope.row.buyCounts }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <!-- <template slot-scope="scope"> -->
          {{ od.receiverName }}
          <br />
          <i class="fa fa-user" style="color: #e3e3e3; font-size: 22px;"></i>
          <!-- </template> -->
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.totalAmount }}
            <div
              v-if="
                od.status == '2' ||
                  od.status == '3' ||
                  od.status == '4' ||
                  od.status == '5'
              "
            >
              <el-divider style="margin: 12px 0;"></el-divider>
              <span v-if="od.payType == 1">微信支付</span>
              <span v-else>支付宝支付</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <span v-if="od.status == '1'">待付款</span>
          <span v-else-if="od.status == '2'">待发货</span>
          <span v-else-if="od.status == '3'">待收货</span>
          <span v-else-if="od.status == '4'">待评价</span>
          <span v-else-if="od.status == '5'">已完成</span>
          <span v-else>已关闭</span>
        </el-table-column>
        <!-- <el-table-column align="center" prop="status"> </el-table-column> -->
        <el-table-column align="center">
          <template slot-scope="scope">
            <!-- <el-link v-if="scope.row.isComment == 0 && od.status == 4">
              <el-button type="primary" size="mini" style="width:80px"
                >评价</el-button
              >
            </el-link> -->
            <el-button
              v-if="scope.row.isComment == 0 && od.status == 4"
              type="primary"
              size="mini"
              style="width:80px"
              @click="setComment(od.userId)"
              >评价</el-button
            >
            <el-button
              v-if="od.status == 1"
              type="danger"
              size="mini"
              @click="doBuy(od.userId)"
              >立即购买</el-button
            >
            <el-button v-else-if="od.status != 6" type="info" size="mini"
              >查看物流信息</el-button
            >
            <el-button v-else type="info" size="mini">再去看看叭</el-button>

            <el-button
              v-if="od.status == 1"
              type="info"
              size="mini"
              @click="cancelPay(od.userId)"
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import http from "@/utils/request.js";

export default {
  props: ["od"],
  mounted() {
    this.od.orderItem.forEach((element) => {
      this.skus.push(element.skuId);
    });
    window.console.log("skus=" + this.skus);
  },
  data() {
    return {
      skus: [], //一个订单里所有的skuID
    };
  },
  methods: {
    setComment(id) {
      this.$message("该功能还没开发，敬请期待" + id);
    },
    doBuy(id) {
      //点击立即购买执行下面的方法
      this.$message({
        message: "点击我就要去付款咯" + id,
        type: "warning",
      });
      // this.$router.push()
    },
    deleteOrder(id) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "订单一但创建不能修改和删除哟~" + id,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //用户主动取消订单
    cancelPay() {
      this.$confirm("确定取消该订单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确定取消订单
          http
            .put(`/orders`, {
              orderId: this.od.orderId,
              orderItem: this.od.orderItem,
            })
            .then(() => {
              this.$message("订单已取消");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.item {
  display: flex;
}
.item .item-pic {
  width: 60px;
  height: 60px;
}

.item .item-title {
  padding-left: 8px;
  width: 180px;
}
.item .item-num {
  text-align: right;
  flex: 1;
  padding-right: 20px;
  color: #e3e3e3;
}
.el-divider--horizontal {
  margin: 12px 0;
}
.el-button + .el-button {
  margin-left: 0px;
  margin-top: 5px;
}
</style>
